import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Form, Input, Tooltip, Checkbox, Button, message, Modal } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
// import NodeRSA from 'node-rsa';//加密
import CanvasPage from './CanvasPage'
import './index.scss';
import { registerReq } from '@/utils/request'

// 栅格-响应式
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 24,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 24,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 24,
      offset: 0,
    },
  },
};


class Register extends Component {
  constructor(props) {
    super(props)
    this.state = {
      spanObj: {
        color: '#fff',
        visible: false
      },
      email: ''
    }
  }
  render() {
    const { spanObj, visible } = this.state
    return (
      <div className="login-register-page" style={{ backgroundColor: 'rgb(35, 39, 65)', width: '100%', height: '100%' }}>
        <Form
          {...formItemLayout}
          name="normal_register"
          className="register-form"
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
          initialValues={{
            agreement: true
          }}
          labelAlign="left"
          scrollToFirstError// 提交失败自动滚动到第一个错误字段
        >
          {/* 邮箱 */}
          <Form.Item
            name="email"
            label={<span style={spanObj}>邮箱</span>}
            rules={[
              {
                type: 'email',
                message: '邮箱格式不正确!',
              },
              {
                required: true,
                message: '请输入邮箱!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          {/* 昵称 */}
          <Form.Item
            name="nickname"
            label={
              <span style={spanObj}>
                昵称&nbsp;
              <Tooltip title="取一个昵称来显示你的个性">
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            }
            rules={[
              {
                required: true,
                message: '请输入用户名!',
                whitespace: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          {/* 密码 */}
          <Form.Item
            name="password"
            label={<span style={spanObj}>密码</span>}
            rules={[
              {
                pattern: /^\w{6,10}$/,
                message: '提示: 6-10位字母数字下划线!'
              },
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
          {/* 确认密码 */}
          <Form.Item
            name="confirm"
            label={<span style={spanObj}>确认密码</span>}
            dependencies={['password']}//它所依赖的字段更新时，该字段将自动触发更新与校验。
            hasFeedback
            rules={[
              {
                pattern: /^\w{6,10}$/,
                message: '提示: 6-10位字母数字下划线!'
              },
              {
                required: true,
                message: '请输入确认密码!',
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject('您输入的两次密码不匹配!');
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          {/* 本站规则 */}
          <Form.Item name="agreement" rules={[
            {
              required: true,
              message: '请仔细阅读本站规则!',
            }
          ]} valuePropName="checked" {...tailFormItemLayout}>
            <Checkbox>
              <span style={spanObj}>我已阅读</span> <a href="http://www.baidu.com">本站规则</a>
            </Checkbox>
          </Form.Item>
          {/* 注册按钮 */}
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              注册
          </Button>
          </Form.Item>
        </Form>
        {/* 画布 */}
        <CanvasPage />
        {/* 对话框 */}
        <Modal
          title="注册成功!"
          visible={visible}
          onOk={this.hideModal}
          onCancel={() => {
            this.setState({
              visible: false
            })
          }}
          okText="去登陆"
          cancelText="取消"
          //垂直居中
          centered={true}>
          <span>是否马上去登录页面?</span>
        </Modal>
      </div>
    )
  }
  onFinish = values => {
    // console.log('Received values of form: ', values);
    // 存email,注册成功则传给login
    this.setState({
      email: values.email
    })
    // 注册请求
    registerReq(values).then(res => {
      if (res.result) {
        message.success({ duration: 1, content: res.msg })
        this.setState({
          visible: true
        })
      } else {
        message.error({ duration: 1, content: res.msg })
      }
    })
  }
  hideModal = () => {
    this.setState({
      visible: false
    })
    this.props.history.push('/login', this.state.email)
  }
  onFinishFailed = errorInfo => {
    // console.log('Failed:', errorInfo);
    message.error({ duration: 1, content: errorInfo.errorFields[0].errors[0] })
  }
  componentWillUnmount() {
    Modal.destroyAll()
  }
}

export default withRouter(Register)